<template>
  <el-button :class="['el-button--mini btnDeleteRow', disabled ? 'disabled' : '']" type="danger" sizi="mini" @click="handleDeleteRow">删除行</el-button>
</template>

<script>
import { mapState } from 'vuex';
export default {
  props: {
    value: {
      type: String,
      default: ''
    },
    tdStyle: {},
    x: {
      type: Number,
      default: 0
    },
    y: {
      type: Number,
      default: 0
    },
    disabled: {
      type: Boolean,
      default: false
    }
  },
  computed: {
    ...mapState({
      cellInfo: (state) => state.form.cellInfo,
      dataJson: (state) => state.form.dataJson,
      apiJson: (state) => state.form.apiJson,
      submitJson: (state) => state.form.submitJson,
      dictJson: (state) => state.form.dictJson,
      histroyData: (state) => state.form.histroyData,
      histroyIndex: (state) => state.form.histroyIndex,
      baseTableConfig: (state) => state.form.baseTableConfig,
      boxAreaXY: (state) => state.form.boxAreaXY,
      xAxisNum: (state) => state.form.xAxisNum,
      yAxisNum: (state) => state.form.yAxisNum
    })
  },
  methods: {
    handleDeleteRow() {
      this.$emit('handleDeleteRow', {
        y: this.y,
        x: this.x,
        btnAddRowField: this.dataJson.rows[this.y].cells[this.x].btnAddRowField
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.btnDeleteRow {
  &.disabled {
    pointer-events: none;
  }
}
</style>
